<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form ref="form" :model="form">
            <el-form-item label="车辆号牌：">
              <el-input
                v-model="select.CPH"
                placeholder="请输入车牌"
                style="width: 150px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="绑定类型：">
              <el-select
                style="width: 180px"
                v-model="cartypestr"
                placeholder="请选择绑定类型"
                @change="getlistdata"
              >
                <el-option
                  v-for="(item, index) in cartypelist"
                  :value="item.cartype"
                  :label="item.cartype"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <el-form ref="form" :model="form" style="float: left">
            <el-form-item>
              <el-button size="mini" type="primary" @click="screeningData"
                >查 询</el-button
              >
              <!-- <el-button size="mini" type="success" @click="handleAdd"
                >新 增</el-button
              >
              <el-button style="padding: 0; border: 0">
                <el-upload
                  action="/上传文件的接口"
                  :on-change="onChange"
                  :auto-upload="false"
                  :show-file-list="false"
                  accept=".xls, .xlsx"
                  class="upload"
                >
                  <el-button size="mini" type="success">导 入</el-button>
                </el-upload>
              </el-button>
              <el-button size="mini" type="warning" @click="exportExcel"
                >导 出</el-button
              > -->
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table
      highlight-current-row
      :data="
        tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
      "
    >
      <el-table-column
        prop="VID"
        label="车辆VID"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="LICENSE_PLATE"
        label="车牌照号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="DRIVERNAME"
        label="绑定驾驶员"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="BINDTIME"
        label="绑定时间"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button type="text" v-if="isJieBang" @click="handleDelete(scope.$index, scope.row)"
            >解绑</el-button
          >
          <el-button type="text" v-else @click="handleEdit(scope.$index, scope.row)"
            >绑定</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 弹出框 -->
    <el-dialog
      title="车辆绑定"
      :visible.sync="isVisibleEdit"
      width="50%"
    >
      <el-form ref="form" :model="form" label-width="5.729vw" class="flex">
        <el-form-item label="车牌照号：" class="wid50">
          <el-input
            v-model="form.LICENSE_PLATE"
            placeholder="请输入车牌照号"
            class="handle-input mr10"
          ></el-input>
        </el-form-item>
        <el-form-item label="绑定司机：">
          <el-select v-model="form.client" placeholder="请选择">
            <el-option
              v-for="item in clientList"
              :key="item.DRIVERID"
              :label="item.NAME"
              :value="item.DRIVERID"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import tool from '@/Tool.js'
import export2Excel from '@/utils/exportExcel/index.js'
import OSS from 'ali-oss';
import { time } from 'echarts';



export default {
  data () {

    return {
      clientData: [],
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      originalData: [],
      tableData: [],
      select: {
        CPH: ''
      },
      isVisibleEdit: false,
      isJieBang: true,
      form: {
        client: '',
      },
      value2: '',
      cartypestr:'已绑定',
      cartypelist:[{"cartype":"已绑定"},{"cartype":"未绑定"}],
      clientList: [],
    }
  },
  created () {
    this.getTeamList()
  },
  mounted () {
    this.getlistdata()

  },
  methods: {
    //获取绑定列表
    async getlistdata () {
      var url = '/RubbishVehicle/GetWorkerDriverBindingInfo?CLIENT_NO=' + localStorage.getItem('CLIENT_NO')+ '&Type='+ this.cartypestr
      const { data } = await this.$Http.get(url)
      this.originalData = data
      this.bangDingZT()
      this.screeningData()
    },
    bangDingZT(){
      if (this.cartypestr == "未绑定") {
        this.isJieBang = false
      }else{
        this.isJieBang = true
      }
    },
    // 获取绑定司机
    async getTeamList () {
      const { data } = await this.$Http.get('RubbishVehicle/GetWorkerDriver?CLIENT_NO=' + localStorage.getItem('CLIENT_NO'))
      this.clientList = data
    },
    // 打开绑定窗口
    handleEdit (index, row) {
      this.form = Object.assign({}, row);
      this.isVisibleEdit = true;
    },
    // 绑定司机
    async handleSubmit () { 
      var screeningData = this.clientList.filter(item => item.DRIVERID === this.form.client)
      const params = {
          CLIENT_NO: localStorage.getItem('CLIENT_NO'),
          TYPE: '绑定',
          LICENSE_PLATE: this.form.LICENSE_PLATE,
          DRIVERID: this.form.client,
          NAME: screeningData[0].NAME,
      }
      console.log('绑定司机：')
      console.log(params)
      const { data } = await this.$Http.get('RubbishVehicle/GetWorkerDriverBinding', { params })
      console.log(data)
      if (data[0].INFO =='1') {
        this.$message.success('绑定成功')
        this.isVisibleEdit = false
        this.getlistdata()
      } else {
        this.$message.error('绑定失败，所属组织机构不同');
      }
    },
    // 接触绑定
    async handleDelete (index, row) {
      const confirmResult = await this.$confirm('确定解绑？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        const params = {
          CLIENT_NO: localStorage.getItem('CLIENT_NO'),
          TYPE: '解绑',
          LICENSE_PLATE: row.LICENSE_PLATE,
          DRIVERID: '',
          NAME: '',
        }
        console.log('解除绑定：')
        console.log(params)
        const { data } = await this.$Http.get('RubbishVehicle/GetWorkerDriverBinding', { params })
        if (data[0].INFO =='1') {
          this.$message.success('解绑成功')
          this.isVisibleEdit = false
          this.getlistdata()
          this.getTeamList()
        }else {
            this.$message.error('解绑失败');
          }  
      }else{
        this.$message.info('取消解绑')
        this.isVisibleEdit = false
      }
      
    },
    // 模糊查询
    screeningData () {
      this.currentPage = 1;
      this.tableData = this.originalData
      if (this.select.CPH) this.tableData = this.tableData.filter(item => item.LICENSE_PLATE.includes(this.select.CPH))
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getlistdata();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>